<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="../../common/css.html" title="图标列表"/>
    <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
    <link rel="stylesheet" href="/assets/css/other/icon.css">
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
        .main .logo {
            margin-top: 0;
            height: auto;
        }

        .main .logo a {
            display: flex;
            align-items: center;
        }

        .main .logo .sub-title {
            margin-left: 0.5em;
            font-size: 22px;
            color: #fff;
            background: linear-gradient(-45deg, #3967FF, #B500FE);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="nav-tabs">
            <ul id="tabs" class="dib-box">
                <li class="dib active"><span>Unicode</span></li>
                <li class="dib"><span>Font class</span></li>
            </ul>
        </div>
        <div class="tab-container">
            <div class="content unicode" style="display: block;">
                <ul class="icon_lists dib-box">

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6f0;</span>
                        <div class="name">加载</div>
                        <div class="code-name">&amp;#xe6f0;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe68d;</span>
                        <div class="name">download</div>
                        <div class="code-name">&amp;#xe68d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe68e;</span>
                        <div class="name">electronics</div>
                        <div class="code-name">&amp;#xe68e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe68f;</span>
                        <div class="name">drag</div>
                        <div class="code-name">&amp;#xe68f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe690;</span>
                        <div class="name">elipsis</div>
                        <div class="code-name">&amp;#xe690;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe691;</span>
                        <div class="name">export</div>
                        <div class="code-name">&amp;#xe691;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe692;</span>
                        <div class="name">explain</div>
                        <div class="code-name">&amp;#xe692;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe693;</span>
                        <div class="name">edit</div>
                        <div class="code-name">&amp;#xe693;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe694;</span>
                        <div class="name">eye-close</div>
                        <div class="code-name">&amp;#xe694;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe695;</span>
                        <div class="name">email</div>
                        <div class="code-name">&amp;#xe695;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe696;</span>
                        <div class="name">error</div>
                        <div class="code-name">&amp;#xe696;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe697;</span>
                        <div class="name">favorite</div>
                        <div class="code-name">&amp;#xe697;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe698;</span>
                        <div class="name">file-common</div>
                        <div class="code-name">&amp;#xe698;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe699;</span>
                        <div class="name">file-delete</div>
                        <div class="code-name">&amp;#xe699;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe69a;</span>
                        <div class="name">file-add</div>
                        <div class="code-name">&amp;#xe69a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe69b;</span>
                        <div class="name">film</div>
                        <div class="code-name">&amp;#xe69b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe69c;</span>
                        <div class="name">fabulous</div>
                        <div class="code-name">&amp;#xe69c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe69d;</span>
                        <div class="name">file</div>
                        <div class="code-name">&amp;#xe69d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe69e;</span>
                        <div class="name">folder-close</div>
                        <div class="code-name">&amp;#xe69e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe69f;</span>
                        <div class="name">filter</div>
                        <div class="code-name">&amp;#xe69f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a0;</span>
                        <div class="name">good</div>
                        <div class="code-name">&amp;#xe6a0;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a1;</span>
                        <div class="name">hide</div>
                        <div class="code-name">&amp;#xe6a1;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a2;</span>
                        <div class="name">home</div>
                        <div class="code-name">&amp;#xe6a2;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a3;</span>
                        <div class="name">history</div>
                        <div class="code-name">&amp;#xe6a3;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a4;</span>
                        <div class="name">file-open</div>
                        <div class="code-name">&amp;#xe6a4;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a5;</span>
                        <div class="name">forward</div>
                        <div class="code-name">&amp;#xe6a5;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a6;</span>
                        <div class="name">import</div>
                        <div class="code-name">&amp;#xe6a6;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a7;</span>
                        <div class="name">image-text</div>
                        <div class="code-name">&amp;#xe6a7;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a8;</span>
                        <div class="name">keyboard-26</div>
                        <div class="code-name">&amp;#xe6a8;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6a9;</span>
                        <div class="name">keyboard-9</div>
                        <div class="code-name">&amp;#xe6a9;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6aa;</span>
                        <div class="name">link</div>
                        <div class="code-name">&amp;#xe6aa;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ab;</span>
                        <div class="name">layout</div>
                        <div class="code-name">&amp;#xe6ab;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ac;</span>
                        <div class="name">fullscreen-shrink</div>
                        <div class="code-name">&amp;#xe6ac;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ad;</span>
                        <div class="name">layers</div>
                        <div class="code-name">&amp;#xe6ad;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ae;</span>
                        <div class="name">lock</div>
                        <div class="code-name">&amp;#xe6ae;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6af;</span>
                        <div class="name">fullscreen-expand</div>
                        <div class="code-name">&amp;#xe6af;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b0;</span>
                        <div class="name">map</div>
                        <div class="code-name">&amp;#xe6b0;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b1;</span>
                        <div class="name">meh</div>
                        <div class="code-name">&amp;#xe6b1;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b2;</span>
                        <div class="name">menu</div>
                        <div class="code-name">&amp;#xe6b2;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b3;</span>
                        <div class="name">loading</div>
                        <div class="code-name">&amp;#xe6b3;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b4;</span>
                        <div class="name">help</div>
                        <div class="code-name">&amp;#xe6b4;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b5;</span>
                        <div class="name">minus-circle</div>
                        <div class="code-name">&amp;#xe6b5;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b6;</span>
                        <div class="name">modular</div>
                        <div class="code-name">&amp;#xe6b6;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b7;</span>
                        <div class="name">notification</div>
                        <div class="code-name">&amp;#xe6b7;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b8;</span>
                        <div class="name">mic</div>
                        <div class="code-name">&amp;#xe6b8;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6b9;</span>
                        <div class="name">more</div>
                        <div class="code-name">&amp;#xe6b9;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ba;</span>
                        <div class="name">pad</div>
                        <div class="code-name">&amp;#xe6ba;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6bb;</span>
                        <div class="name">operation</div>
                        <div class="code-name">&amp;#xe6bb;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6bc;</span>
                        <div class="name">play</div>
                        <div class="code-name">&amp;#xe6bc;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6bd;</span>
                        <div class="name">print</div>
                        <div class="code-name">&amp;#xe6bd;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6be;</span>
                        <div class="name">mobile-phone</div>
                        <div class="code-name">&amp;#xe6be;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6bf;</span>
                        <div class="name">minus</div>
                        <div class="code-name">&amp;#xe6bf;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c0;</span>
                        <div class="name">navigation</div>
                        <div class="code-name">&amp;#xe6c0;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c1;</span>
                        <div class="name">pdf</div>
                        <div class="code-name">&amp;#xe6c1;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c2;</span>
                        <div class="name">prompt</div>
                        <div class="code-name">&amp;#xe6c2;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c3;</span>
                        <div class="name">move</div>
                        <div class="code-name">&amp;#xe6c3;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c4;</span>
                        <div class="name">refresh</div>
                        <div class="code-name">&amp;#xe6c4;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c5;</span>
                        <div class="name">run-up</div>
                        <div class="code-name">&amp;#xe6c5;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c6;</span>
                        <div class="name">picture</div>
                        <div class="code-name">&amp;#xe6c6;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c7;</span>
                        <div class="name">run-in</div>
                        <div class="code-name">&amp;#xe6c7;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c8;</span>
                        <div class="name">pin</div>
                        <div class="code-name">&amp;#xe6c8;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6c9;</span>
                        <div class="name">save</div>
                        <div class="code-name">&amp;#xe6c9;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ca;</span>
                        <div class="name">search</div>
                        <div class="code-name">&amp;#xe6ca;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6cb;</span>
                        <div class="name">share</div>
                        <div class="code-name">&amp;#xe6cb;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6cc;</span>
                        <div class="name">scanning</div>
                        <div class="code-name">&amp;#xe6cc;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6cd;</span>
                        <div class="name">security</div>
                        <div class="code-name">&amp;#xe6cd;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ce;</span>
                        <div class="name">sign-out</div>
                        <div class="code-name">&amp;#xe6ce;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6cf;</span>
                        <div class="name">select</div>
                        <div class="code-name">&amp;#xe6cf;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d0;</span>
                        <div class="name">stop</div>
                        <div class="code-name">&amp;#xe6d0;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d1;</span>
                        <div class="name">success</div>
                        <div class="code-name">&amp;#xe6d1;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d2;</span>
                        <div class="name">smile</div>
                        <div class="code-name">&amp;#xe6d2;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d3;</span>
                        <div class="name">switch</div>
                        <div class="code-name">&amp;#xe6d3;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d4;</span>
                        <div class="name">setting</div>
                        <div class="code-name">&amp;#xe6d4;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d5;</span>
                        <div class="name">survey</div>
                        <div class="code-name">&amp;#xe6d5;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d6;</span>
                        <div class="name">task</div>
                        <div class="code-name">&amp;#xe6d6;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d7;</span>
                        <div class="name">skip</div>
                        <div class="code-name">&amp;#xe6d7;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d8;</span>
                        <div class="name">text</div>
                        <div class="code-name">&amp;#xe6d8;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6d9;</span>
                        <div class="name">time</div>
                        <div class="code-name">&amp;#xe6d9;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6da;</span>
                        <div class="name">telephone-out</div>
                        <div class="code-name">&amp;#xe6da;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6db;</span>
                        <div class="name">toggle-left</div>
                        <div class="code-name">&amp;#xe6db;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6dc;</span>
                        <div class="name">toggle-right</div>
                        <div class="code-name">&amp;#xe6dc;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6dd;</span>
                        <div class="name">telephone</div>
                        <div class="code-name">&amp;#xe6dd;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6de;</span>
                        <div class="name">top</div>
                        <div class="code-name">&amp;#xe6de;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6df;</span>
                        <div class="name">unlock</div>
                        <div class="code-name">&amp;#xe6df;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e0;</span>
                        <div class="name">user</div>
                        <div class="code-name">&amp;#xe6e0;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e1;</span>
                        <div class="name">upload</div>
                        <div class="code-name">&amp;#xe6e1;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e2;</span>
                        <div class="name">work</div>
                        <div class="code-name">&amp;#xe6e2;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e3;</span>
                        <div class="name">training</div>
                        <div class="code-name">&amp;#xe6e3;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e4;</span>
                        <div class="name">warning</div>
                        <div class="code-name">&amp;#xe6e4;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e5;</span>
                        <div class="name">zoom-in</div>
                        <div class="code-name">&amp;#xe6e5;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e6;</span>
                        <div class="name">zoom-out</div>
                        <div class="code-name">&amp;#xe6e6;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e7;</span>
                        <div class="name">add-bold</div>
                        <div class="code-name">&amp;#xe6e7;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e8;</span>
                        <div class="name">arrow-left-bold</div>
                        <div class="code-name">&amp;#xe6e8;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6e9;</span>
                        <div class="name">arrow-up-bold</div>
                        <div class="code-name">&amp;#xe6e9;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ea;</span>
                        <div class="name">close-bold</div>
                        <div class="code-name">&amp;#xe6ea;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6eb;</span>
                        <div class="name">arrow-down-bold</div>
                        <div class="code-name">&amp;#xe6eb;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ec;</span>
                        <div class="name">minus-bold</div>
                        <div class="code-name">&amp;#xe6ec;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ed;</span>
                        <div class="name">arrow-right-bold</div>
                        <div class="code-name">&amp;#xe6ed;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe6ee;</span>
                        <div class="name">select-bold</div>
                        <div class="code-name">&amp;#xe6ee;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe663;</span>
                        <div class="name">column-3</div>
                        <div class="code-name">&amp;#xe663;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe664;</span>
                        <div class="name">column-4</div>
                        <div class="code-name">&amp;#xe664;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe665;</span>
                        <div class="name">add</div>
                        <div class="code-name">&amp;#xe665;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe666;</span>
                        <div class="name">add-circle</div>
                        <div class="code-name">&amp;#xe666;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe667;</span>
                        <div class="name">adjust</div>
                        <div class="code-name">&amp;#xe667;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe668;</span>
                        <div class="name">arrow-up-circle</div>
                        <div class="code-name">&amp;#xe668;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe669;</span>
                        <div class="name">arrow-right-circle</div>
                        <div class="code-name">&amp;#xe669;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe66a;</span>
                        <div class="name">arrow-down</div>
                        <div class="code-name">&amp;#xe66a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe66b;</span>
                        <div class="name">ashbin</div>
                        <div class="code-name">&amp;#xe66b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe66c;</span>
                        <div class="name">arrow-right</div>
                        <div class="code-name">&amp;#xe66c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe66d;</span>
                        <div class="name">browse</div>
                        <div class="code-name">&amp;#xe66d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe66e;</span>
                        <div class="name">bottom</div>
                        <div class="code-name">&amp;#xe66e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe66f;</span>
                        <div class="name">back</div>
                        <div class="code-name">&amp;#xe66f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe670;</span>
                        <div class="name">bad</div>
                        <div class="code-name">&amp;#xe670;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe671;</span>
                        <div class="name">arrow-double-left</div>
                        <div class="code-name">&amp;#xe671;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe672;</span>
                        <div class="name">arrow-left-circle</div>
                        <div class="code-name">&amp;#xe672;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe673;</span>
                        <div class="name">arrow-double-right</div>
                        <div class="code-name">&amp;#xe673;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe674;</span>
                        <div class="name">caps-lock</div>
                        <div class="code-name">&amp;#xe674;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe675;</span>
                        <div class="name">camera</div>
                        <div class="code-name">&amp;#xe675;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe676;</span>
                        <div class="name">chart-bar</div>
                        <div class="code-name">&amp;#xe676;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe677;</span>
                        <div class="name">attachment</div>
                        <div class="code-name">&amp;#xe677;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe678;</span>
                        <div class="name">code</div>
                        <div class="code-name">&amp;#xe678;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe679;</span>
                        <div class="name">close</div>
                        <div class="code-name">&amp;#xe679;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe67a;</span>
                        <div class="name">check-item</div>
                        <div class="code-name">&amp;#xe67a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe67b;</span>
                        <div class="name">calendar</div>
                        <div class="code-name">&amp;#xe67b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe67c;</span>
                        <div class="name">comment</div>
                        <div class="code-name">&amp;#xe67c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe67d;</span>
                        <div class="name">column-vertical</div>
                        <div class="code-name">&amp;#xe67d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe67e;</span>
                        <div class="name">column-horizontal</div>
                        <div class="code-name">&amp;#xe67e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe67f;</span>
                        <div class="name">complete</div>
                        <div class="code-name">&amp;#xe67f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe680;</span>
                        <div class="name">chart-pie</div>
                        <div class="code-name">&amp;#xe680;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe681;</span>
                        <div class="name">cry</div>
                        <div class="code-name">&amp;#xe681;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe682;</span>
                        <div class="name">customer-service</div>
                        <div class="code-name">&amp;#xe682;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe683;</span>
                        <div class="name">delete</div>
                        <div class="code-name">&amp;#xe683;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe684;</span>
                        <div class="name">direction-down</div>
                        <div class="code-name">&amp;#xe684;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe685;</span>
                        <div class="name">copy</div>
                        <div class="code-name">&amp;#xe685;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe686;</span>
                        <div class="name">cut</div>
                        <div class="code-name">&amp;#xe686;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe687;</span>
                        <div class="name">data-view</div>
                        <div class="code-name">&amp;#xe687;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe688;</span>
                        <div class="name">direction-down-circle</div>
                        <div class="code-name">&amp;#xe688;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe689;</span>
                        <div class="name">direction-right</div>
                        <div class="code-name">&amp;#xe689;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe68a;</span>
                        <div class="name">direction-up</div>
                        <div class="code-name">&amp;#xe68a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe68b;</span>
                        <div class="name">discount</div>
                        <div class="code-name">&amp;#xe68b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon">&#xe68c;</span>
                        <div class="name">direction-left</div>
                        <div class="code-name">&amp;#xe68c;</div>
                    </li>
                </ul>
            </div>
            <div class="content font-class">
                <ul class="icon_lists dib-box">

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-load"></span>
                        <div class="name">
                            加载
                        </div>
                        <div class="code-name">.pear-icon-load
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-download"></span>
                        <div class="name">
                            download
                        </div>
                        <div class="code-name">.pear-icon-download
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-electronics"></span>
                        <div class="name">
                            electronics
                        </div>
                        <div class="code-name">.pear-icon-electronics
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-drag"></span>
                        <div class="name">
                            drag
                        </div>
                        <div class="code-name">.pear-icon-drag
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-elipsis"></span>
                        <div class="name">
                            elipsis
                        </div>
                        <div class="code-name">.pear-icon-elipsis
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-export"></span>
                        <div class="name">
                            export
                        </div>
                        <div class="code-name">.pear-icon-export
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-explain"></span>
                        <div class="name">
                            explain
                        </div>
                        <div class="code-name">.pear-icon-explain
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-edit"></span>
                        <div class="name">
                            edit
                        </div>
                        <div class="code-name">.pear-icon-edit
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-eye-close"></span>
                        <div class="name">
                            eye-close
                        </div>
                        <div class="code-name">.pear-icon-eye-close
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-email"></span>
                        <div class="name">
                            email
                        </div>
                        <div class="code-name">.pear-icon-email
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-error"></span>
                        <div class="name">
                            error
                        </div>
                        <div class="code-name">.pear-icon-error
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-favorite"></span>
                        <div class="name">
                            favorite
                        </div>
                        <div class="code-name">.pear-icon-favorite
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-file-common"></span>
                        <div class="name">
                            file-common
                        </div>
                        <div class="code-name">.pear-icon-file-common
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-file-delete"></span>
                        <div class="name">
                            file-delete
                        </div>
                        <div class="code-name">.pear-icon-file-delete
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-file-add"></span>
                        <div class="name">
                            file-add
                        </div>
                        <div class="code-name">.pear-icon-file-add
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-film"></span>
                        <div class="name">
                            film
                        </div>
                        <div class="code-name">.pear-icon-film
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-fabulous"></span>
                        <div class="name">
                            fabulous
                        </div>
                        <div class="code-name">.pear-icon-fabulous
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-file"></span>
                        <div class="name">
                            file
                        </div>
                        <div class="code-name">.pear-icon-file
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-folder-close"></span>
                        <div class="name">
                            folder-close
                        </div>
                        <div class="code-name">.pear-icon-folder-close
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-filter"></span>
                        <div class="name">
                            filter
                        </div>
                        <div class="code-name">.pear-icon-filter
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-good"></span>
                        <div class="name">
                            good
                        </div>
                        <div class="code-name">.pear-icon-good
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-hide"></span>
                        <div class="name">
                            hide
                        </div>
                        <div class="code-name">.pear-icon-hide
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-home"></span>
                        <div class="name">
                            home
                        </div>
                        <div class="code-name">.pear-icon-home
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-history"></span>
                        <div class="name">
                            history
                        </div>
                        <div class="code-name">.pear-icon-history
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-file-open"></span>
                        <div class="name">
                            file-open
                        </div>
                        <div class="code-name">.pear-icon-file-open
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-forward"></span>
                        <div class="name">
                            forward
                        </div>
                        <div class="code-name">.pear-icon-forward
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-import"></span>
                        <div class="name">
                            import
                        </div>
                        <div class="code-name">.pear-icon-import
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-image-text"></span>
                        <div class="name">
                            image-text
                        </div>
                        <div class="code-name">.pear-icon-image-text
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-keyboard-26"></span>
                        <div class="name">
                            keyboard-26
                        </div>
                        <div class="code-name">.pear-icon-keyboard-26
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-keyboard-9"></span>
                        <div class="name">
                            keyboard-9
                        </div>
                        <div class="code-name">.pear-icon-keyboard-9
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-link"></span>
                        <div class="name">
                            link
                        </div>
                        <div class="code-name">.pear-icon-link
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-layout"></span>
                        <div class="name">
                            layout
                        </div>
                        <div class="code-name">.pear-icon-layout
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-fullscreen-shrink"></span>
                        <div class="name">
                            fullscreen-shrink
                        </div>
                        <div class="code-name">.pear-icon-fullscreen-shrink
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-layers"></span>
                        <div class="name">
                            layers
                        </div>
                        <div class="code-name">.pear-icon-layers
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-lock"></span>
                        <div class="name">
                            lock
                        </div>
                        <div class="code-name">.pear-icon-lock
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-fullscreen-expand"></span>
                        <div class="name">
                            fullscreen-expand
                        </div>
                        <div class="code-name">.pear-icon-fullscreen-expand
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-map"></span>
                        <div class="name">
                            map
                        </div>
                        <div class="code-name">.pear-icon-map
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-meh"></span>
                        <div class="name">
                            meh
                        </div>
                        <div class="code-name">.pear-icon-meh
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-menu"></span>
                        <div class="name">
                            menu
                        </div>
                        <div class="code-name">.pear-icon-menu
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-loading"></span>
                        <div class="name">
                            loading
                        </div>
                        <div class="code-name">.pear-icon-loading
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-help"></span>
                        <div class="name">
                            help
                        </div>
                        <div class="code-name">.pear-icon-help
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-minus-circle"></span>
                        <div class="name">
                            minus-circle
                        </div>
                        <div class="code-name">.pear-icon-minus-circle
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-modular"></span>
                        <div class="name">
                            modular
                        </div>
                        <div class="code-name">.pear-icon-modular
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-notification"></span>
                        <div class="name">
                            notification
                        </div>
                        <div class="code-name">.pear-icon-notification
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-mic"></span>
                        <div class="name">
                            mic
                        </div>
                        <div class="code-name">.pear-icon-mic
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-more"></span>
                        <div class="name">
                            more
                        </div>
                        <div class="code-name">.pear-icon-more
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-pad"></span>
                        <div class="name">
                            pad
                        </div>
                        <div class="code-name">.pear-icon-pad
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-operation"></span>
                        <div class="name">
                            operation
                        </div>
                        <div class="code-name">.pear-icon-operation
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-play"></span>
                        <div class="name">
                            play
                        </div>
                        <div class="code-name">.pear-icon-play
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-print"></span>
                        <div class="name">
                            print
                        </div>
                        <div class="code-name">.pear-icon-print
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-mobile-phone"></span>
                        <div class="name">
                            mobile-phone
                        </div>
                        <div class="code-name">.pear-icon-mobile-phone
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-minus"></span>
                        <div class="name">
                            minus
                        </div>
                        <div class="code-name">.pear-icon-minus
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-navigation"></span>
                        <div class="name">
                            navigation
                        </div>
                        <div class="code-name">.pear-icon-navigation
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-pdf"></span>
                        <div class="name">
                            pdf
                        </div>
                        <div class="code-name">.pear-icon-pdf
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-prompt"></span>
                        <div class="name">
                            prompt
                        </div>
                        <div class="code-name">.pear-icon-prompt
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-move"></span>
                        <div class="name">
                            move
                        </div>
                        <div class="code-name">.pear-icon-move
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-refresh"></span>
                        <div class="name">
                            refresh
                        </div>
                        <div class="code-name">.pear-icon-refresh
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-run-up"></span>
                        <div class="name">
                            run-up
                        </div>
                        <div class="code-name">.pear-icon-run-up
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-picture"></span>
                        <div class="name">
                            picture
                        </div>
                        <div class="code-name">.pear-icon-picture
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-run-in"></span>
                        <div class="name">
                            run-in
                        </div>
                        <div class="code-name">.pear-icon-run-in
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-pin"></span>
                        <div class="name">
                            pin
                        </div>
                        <div class="code-name">.pear-icon-pin
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-save"></span>
                        <div class="name">
                            save
                        </div>
                        <div class="code-name">.pear-icon-save
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-search"></span>
                        <div class="name">
                            search
                        </div>
                        <div class="code-name">.pear-icon-search
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-share"></span>
                        <div class="name">
                            share
                        </div>
                        <div class="code-name">.pear-icon-share
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-scanning"></span>
                        <div class="name">
                            scanning
                        </div>
                        <div class="code-name">.pear-icon-scanning
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-security"></span>
                        <div class="name">
                            security
                        </div>
                        <div class="code-name">.pear-icon-security
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-sign-out"></span>
                        <div class="name">
                            sign-out
                        </div>
                        <div class="code-name">.pear-icon-sign-out
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-select"></span>
                        <div class="name">
                            select
                        </div>
                        <div class="code-name">.pear-icon-select
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-stop"></span>
                        <div class="name">
                            stop
                        </div>
                        <div class="code-name">.pear-icon-stop
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-success"></span>
                        <div class="name">
                            success
                        </div>
                        <div class="code-name">.pear-icon-success
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-smile"></span>
                        <div class="name">
                            smile
                        </div>
                        <div class="code-name">.pear-icon-smile
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-switch"></span>
                        <div class="name">
                            switch
                        </div>
                        <div class="code-name">.pear-icon-switch
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-setting"></span>
                        <div class="name">
                            setting
                        </div>
                        <div class="code-name">.pear-icon-setting
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-survey"></span>
                        <div class="name">
                            survey
                        </div>
                        <div class="code-name">.pear-icon-survey
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-task"></span>
                        <div class="name">
                            task
                        </div>
                        <div class="code-name">.pear-icon-task
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-skip"></span>
                        <div class="name">
                            skip
                        </div>
                        <div class="code-name">.pear-icon-skip
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-text"></span>
                        <div class="name">
                            text
                        </div>
                        <div class="code-name">.pear-icon-text
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-time"></span>
                        <div class="name">
                            time
                        </div>
                        <div class="code-name">.pear-icon-time
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-telephone-out"></span>
                        <div class="name">
                            telephone-out
                        </div>
                        <div class="code-name">.pear-icon-telephone-out
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-toggle-left"></span>
                        <div class="name">
                            toggle-left
                        </div>
                        <div class="code-name">.pear-icon-toggle-left
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-toggle-right"></span>
                        <div class="name">
                            toggle-right
                        </div>
                        <div class="code-name">.pear-icon-toggle-right
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-telephone"></span>
                        <div class="name">
                            telephone
                        </div>
                        <div class="code-name">.pear-icon-telephone
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-top"></span>
                        <div class="name">
                            top
                        </div>
                        <div class="code-name">.pear-icon-top
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-unlock"></span>
                        <div class="name">
                            unlock
                        </div>
                        <div class="code-name">.pear-icon-unlock
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-user"></span>
                        <div class="name">
                            user
                        </div>
                        <div class="code-name">.pear-icon-user
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-upload"></span>
                        <div class="name">
                            upload
                        </div>
                        <div class="code-name">.pear-icon-upload
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-work"></span>
                        <div class="name">
                            work
                        </div>
                        <div class="code-name">.pear-icon-work
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-training"></span>
                        <div class="name">
                            training
                        </div>
                        <div class="code-name">.pear-icon-training
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-warning"></span>
                        <div class="name">
                            warning
                        </div>
                        <div class="code-name">.pear-icon-warning
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-zoom-in"></span>
                        <div class="name">
                            zoom-in
                        </div>
                        <div class="code-name">.pear-icon-zoom-in
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-zoom-out"></span>
                        <div class="name">
                            zoom-out
                        </div>
                        <div class="code-name">.pear-icon-zoom-out
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-add-bold"></span>
                        <div class="name">
                            add-bold
                        </div>
                        <div class="code-name">.pear-icon-add-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-left-bold"></span>
                        <div class="name">
                            arrow-left-bold
                        </div>
                        <div class="code-name">.pear-icon-arrow-left-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-up-bold"></span>
                        <div class="name">
                            arrow-up-bold
                        </div>
                        <div class="code-name">.pear-icon-arrow-up-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-close-bold"></span>
                        <div class="name">
                            close-bold
                        </div>
                        <div class="code-name">.pear-icon-close-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-down-bold"></span>
                        <div class="name">
                            arrow-down-bold
                        </div>
                        <div class="code-name">.pear-icon-arrow-down-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-minus-bold"></span>
                        <div class="name">
                            minus-bold
                        </div>
                        <div class="code-name">.pear-icon-minus-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-right-bold"></span>
                        <div class="name">
                            arrow-right-bold
                        </div>
                        <div class="code-name">.pear-icon-arrow-right-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-select-bold"></span>
                        <div class="name">
                            select-bold
                        </div>
                        <div class="code-name">.pear-icon-select-bold
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-3column"></span>
                        <div class="name">
                            column-3
                        </div>
                        <div class="code-name">.pear-icon-3column
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-column-4"></span>
                        <div class="name">
                            column-4
                        </div>
                        <div class="code-name">.pear-icon-column-4
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-add"></span>
                        <div class="name">
                            add
                        </div>
                        <div class="code-name">.pear-icon-add
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-add-circle"></span>
                        <div class="name">
                            add-circle
                        </div>
                        <div class="code-name">.pear-icon-add-circle
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-adjust"></span>
                        <div class="name">
                            adjust
                        </div>
                        <div class="code-name">.pear-icon-adjust
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-up-circle"></span>
                        <div class="name">
                            arrow-up-circle
                        </div>
                        <div class="code-name">.pear-icon-arrow-up-circle
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-right-circle"></span>
                        <div class="name">
                            arrow-right-circle
                        </div>
                        <div class="code-name">.pear-icon-arrow-right-circle
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-down"></span>
                        <div class="name">
                            arrow-down
                        </div>
                        <div class="code-name">.pear-icon-arrow-down
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-ashbin"></span>
                        <div class="name">
                            ashbin
                        </div>
                        <div class="code-name">.pear-icon-ashbin
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-right"></span>
                        <div class="name">
                            arrow-right
                        </div>
                        <div class="code-name">.pear-icon-arrow-right
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-browse"></span>
                        <div class="name">
                            browse
                        </div>
                        <div class="code-name">.pear-icon-browse
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-bottom"></span>
                        <div class="name">
                            bottom
                        </div>
                        <div class="code-name">.pear-icon-bottom
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-back"></span>
                        <div class="name">
                            back
                        </div>
                        <div class="code-name">.pear-icon-back
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-bad"></span>
                        <div class="name">
                            bad
                        </div>
                        <div class="code-name">.pear-icon-bad
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-double-left"></span>
                        <div class="name">
                            arrow-double-left
                        </div>
                        <div class="code-name">.pear-icon-arrow-double-left
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-left-circle"></span>
                        <div class="name">
                            arrow-left-circle
                        </div>
                        <div class="code-name">.pear-icon-arrow-left-circle
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-arrow-double-right"></span>
                        <div class="name">
                            arrow-double-right
                        </div>
                        <div class="code-name">.pear-icon-arrow-double-right
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-caps-lock"></span>
                        <div class="name">
                            caps-lock
                        </div>
                        <div class="code-name">.pear-icon-caps-lock
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-camera"></span>
                        <div class="name">
                            camera
                        </div>
                        <div class="code-name">.pear-icon-camera
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-chart-bar"></span>
                        <div class="name">
                            chart-bar
                        </div>
                        <div class="code-name">.pear-icon-chart-bar
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-attachment"></span>
                        <div class="name">
                            attachment
                        </div>
                        <div class="code-name">.pear-icon-attachment
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-code"></span>
                        <div class="name">
                            code
                        </div>
                        <div class="code-name">.pear-icon-code
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-close"></span>
                        <div class="name">
                            close
                        </div>
                        <div class="code-name">.pear-icon-close
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-check-item"></span>
                        <div class="name">
                            check-item
                        </div>
                        <div class="code-name">.pear-icon-check-item
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-calendar"></span>
                        <div class="name">
                            calendar
                        </div>
                        <div class="code-name">.pear-icon-calendar
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-comment"></span>
                        <div class="name">
                            comment
                        </div>
                        <div class="code-name">.pear-icon-comment
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-column-vertical"></span>
                        <div class="name">
                            column-vertical
                        </div>
                        <div class="code-name">.pear-icon-column-vertical
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-column-horizontal"></span>
                        <div class="name">
                            column-horizontal
                        </div>
                        <div class="code-name">.pear-icon-column-horizontal
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-complete"></span>
                        <div class="name">
                            complete
                        </div>
                        <div class="code-name">.pear-icon-complete
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-chart-pie"></span>
                        <div class="name">
                            chart-pie
                        </div>
                        <div class="code-name">.pear-icon-chart-pie
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-cry"></span>
                        <div class="name">
                            cry
                        </div>
                        <div class="code-name">.pear-icon-cry
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-customer-service"></span>
                        <div class="name">
                            customer-service
                        </div>
                        <div class="code-name">.pear-icon-customer-service
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-delete"></span>
                        <div class="name">
                            delete
                        </div>
                        <div class="code-name">.pear-icon-delete
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-direction-down"></span>
                        <div class="name">
                            direction-down
                        </div>
                        <div class="code-name">.pear-icon-direction-down
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-copy"></span>
                        <div class="name">
                            copy
                        </div>
                        <div class="code-name">.pear-icon-copy
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-cut"></span>
                        <div class="name">
                            cut
                        </div>
                        <div class="code-name">.pear-icon-cut
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-data-view"></span>
                        <div class="name">
                            data-view
                        </div>
                        <div class="code-name">.pear-icon-data-view
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-direction-down-circle"></span>
                        <div class="name">
                            direction-down-circle
                        </div>
                        <div class="code-name">.pear-icon-direction-down-circle
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-direction-right"></span>
                        <div class="name">
                            direction-right
                        </div>
                        <div class="code-name">.pear-icon-direction-right
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-direction-up"></span>
                        <div class="name">
                            direction-up
                        </div>
                        <div class="code-name">.pear-icon-direction-up
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-discount"></span>
                        <div class="name">
                            discount
                        </div>
                        <div class="code-name">.pear-icon-discount
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon pear-icon pear-icon-direction-left"></span>
                        <div class="name">
                            direction-left
                        </div>
                        <div class="code-name">.pear-icon-direction-left
                        </div>
                    </li>

                </ul>

            </div>
            <div class="content symbol">


            </div>

        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.tab-container .content:first').show()

            $('#tabs li').click(function (e) {
                var tabContent = $('.tab-container .content')
                var index = $(this).index()

                if ($(this).hasClass('active')) {
                    return
                } else {
                    $('#tabs li').removeClass('active')
                    $(this).addClass('active')

                    tabContent.hide().eq(index).fadeIn()
                }
            })
        })
    </script>
</body>
</html>
